<template>
	<view class="page-container bg-grey">
		<up-navbar safeAreaInsetTop fixed placeholder bgColor="transparent" :leftIconSize="0"></up-navbar>
		<image :src="imgBaseUrl + 'mine-header.png'" class="mine-header" />
		<view class="plr-24 pos-rel">
			<view class="space-between flex-a mt-20 mb-40">
				<view class="flex-a">
					<image :src="imgBaseUrl + 'avatar.png'" class="user-avatar" />
					<view class="ml-16">
						<view class="fs-36 font-bold">快乐小乖</view>
						<view class="fs-24 c-black-_4 mt-8">137652615241</view>
					</view>
				</view>
				<image :src="imgBaseUrl + 'arrow-right.png?v=1'" class="icon-40" />
			</view>
			<view class="zjy-card-form" v-if="tgyInfo?.id">
				<view class="space-between flex-a">
					<view class="zjy-card-title">推广中心</view>
					<view class="fs-26 c-grey-86" @click="navigateTo('/pages/promotion/index')">
						<text>更多</text>
						<text class="arrow-right ml-8"></text>
					</view>
				</view>
				<view class="mt-24 flex">
					<view class="ptb-32 pl-28 pr-24 flex-1 mr-8 withdraw">
						<view class="fs-24 c-grey-86 flex-a">
							<text>可提现金额</text>
							<zjy-desensitization />
						</view>
						<view class="mt-4 space-between flex-a">
							<text class="fs-32 font-bold font-oppo">{{ formatAmount(tgyInfo.balance_in_cent) }}</text>
							<zjy-button size="mini" @click="navigateTo('/pages/promotion/withdraw')">提现</zjy-button>
						</view>
					</view>
					<view class="ptb-32 pl-28 pr-24 flex-1 ml-8 promotion-number">
						<view class="fs-24 c-grey-86">下线人数</view>
						<view class="mt-4 space-between flex-a">
							<text class="fs-32 font-bold font-oppo">{{ tgyInfo.invite_count }}人</text>
							<zjy-button type="line" size="mini">邀请</zjy-button>
						</view>
					</view>
				</view>
				<view class="mt-28 flex fs-24 c-grey-86">
					<view class="flex-1 text-center">
						<view>累计佣金</view>
						<view class="fs-28 font-oppo font-bold mt-8">{{ formatAmount(tgyInfo.total_in_cent) }}</view>
					</view>
					<view class="flex-1 text-center">
						<view>待入账</view>
						<view class="fs-28 font-oppo font-bold mt-8">{{ formatAmount(tgyInfo.unsettle_in_cent) }}</view>
					</view>
					<view class="flex-1 text-center">
						<view>提现中</view>
						<view class="fs-28 font-oppo font-bold mt-8">{{ formatAmount(tgyInfo.cashing_in_cent) }}</view>
					</view>
					<view class="flex-1 text-center">
						<view>已提现</view>
						<view class="fs-28 font-oppo font-bold mt-8">{{ formatAmount(tgyInfo.cashed_in_cent) }}</view>
					</view>
				</view>
			</view>
			<view class="zjy-card-form mt-16">
				<view class="space-between flex-a">
					<view class="zjy-card-title">我的订单</view>
					<view class="fs-26 c-grey-86">
						<text>全部订单</text>
						<text class="arrow-right ml-8"></text>
					</view>
				</view>
				<view class="mt-28 flex fs-24">
					<view class="flex-1 text-center">
						<image :src="imgBaseUrl + 'order-unpaid.png'" class="icon-56" />
						<view class="mt-16">待付款</view>
					</view>
					<view class="flex-1 text-center">
						<image :src="imgBaseUrl + 'order-complete.png'" class="icon-56" />
						<view class="mt-16">待出行</view>
					</view>
					<view class="flex-1 text-center">
						<image :src="imgBaseUrl + 'order-comment.png'" class="icon-56" />
						<view class="mt-16">待评价</view>
					</view>
					<view class="flex-1 text-center">
						<image :src="imgBaseUrl + 'order-refund.png'" class="icon-56" />
						<view class="mt-16">退款/售后</view>
					</view>
				</view>
			</view>
			<view class="zjy-card-form mt-16">
				<view class="space-between flex-a">
					<view class="zjy-card-title">更多服务</view>
				</view>
				<view class="fs-28">
					<view class="pt-32 flex">
						<image :src="imgBaseUrl + 'mine-comment.png'" class="icon-40" />
						<view class="ml-8 pl-8 pb-32 bd-bottom flex-1 space-between flex-a">
							<text>我的评价</text>
							<text class="arrow-right"></text>
						</view>
					</view>
					<view v-if="!tgyInfo?.id && tgySetting?.tgy_reg_enabled" class="pt-32 flex" @click="tgyApply">
						<image :src="imgBaseUrl + 'mine-tgy.png'" class="icon-40" />
						<view class="ml-8 pl-8 pb-32 bd-bottom flex-1 space-between flex-a">
							<text>申请成为推广员</text>
							<text class="arrow-right"></text>
						</view>
					</view>
					<view class="pt-32 flex">
						<image :src="imgBaseUrl + 'mine-tourist.png'" class="icon-40" />
						<view class="ml-8 pl-8 pb-32 bd-bottom flex-1 space-between flex-a">
							<text>游客信息</text>
							<text class="arrow-right"></text>
						</view>
					</view>
					<view class="pt-32 flex">
						<image :src="imgBaseUrl + 'mine-service.png'" class="icon-40" />
						<view class="ml-8 pl-8 flex-1 space-between flex-a">
							<text>在线客服</text>
							<text class="arrow-right"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<footer-bar :current="2" />
	</view>
</template>

<script setup lang="ts">
import { onShow } from "@dcloudio/uni-app"
import FooterBar from "@/components/footer/footer-bar.vue"
import useCommonStore from "@/store/common"
import { navigateTo } from "@/utils/page-redirect"
import { needLogin } from "@/utils/users"
import { $getTgyApplication, $getTgyInfo, $tgySetting } from "@/api/promotion"
import { TgyApplyStatus } from "@/constants/promotion"
import { formatAmount } from "@/utils/tools"

const imgBaseUrl = inject("imgBaseUrl")
const commonStore = useCommonStore()
//#region 推广员
const tgySetting = ref()
const tgyInfo = ref()
const tgyApply = () => {
	//先获取当前申请状态
	$getTgyApplication().then((res: any) => {
		if (!res?.id) {
			//未申请
			navigateTo("/pages/promotion/apply-promoter")
			return
		}
		if (res.state == TgyApplyStatus.initial) {
			//待审核
			return navigateTo("/pages/common/res", { type: "tgyApplication-initial" })
		}
		if (res.state == TgyApplyStatus.refused) {
			//已拒绝
			return navigateTo("/pages/common/res", { type: "tgyApplication-refused" })
		}
	})
}
//#endregion
onShow(async () => {
	if (needLogin()) {
		return
	}
	tgyInfo.value = await $getTgyInfo()
	if (!tgyInfo.value?.id) {
		tgySetting.value = await $tgySetting()
	}
})
</script>
<style lang="scss" scoped>
.page-container {
	padding-bottom: calc(env(safe-area-inset-bottom) + 50px);
}
.mine-header {
	width: 100%;
	height: 510rpx;
	position: absolute;
	top: 0;
}
.withdraw {
	background: rgba(254, 224, 56, 0.06);
}
.promotion-number {
	background: #fbfbfa;
}
</style>
